<template>
	<section class="main">
		<h3 class="nametitle">{{title}}</h3><!--手机站用的标题-->
		<aside class="list">
			<ul>
				<li v-for="(item,index) in list">
					<!--<a href="#">技术装备及管理提升项目</a>-->
					<router-link :to="{path:'/listProjectDetail',query:{id:$route.query.id,listName:item.projectName,subid:item.id}}">{{item.projectName}}</router-link>
				</li>
				<!--<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">技术装备及管理提升项目</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>
				<li>
					<a href="#">互联网服务创新扶持计划资助项目</a>
				</li>
				<li>
					<a href="#">企业品牌培育资助奖励</a>
				</li>-->
			</ul>
		</aside>
	</section>
</template>

<script>
	export default{
		data (){
			return {
				title:this.$route.query.listName,
				acitveNum:"item_"+this.$route.query.id,
				id:this.$route.query.id,
				pageNumber:1,
				pageSize:60,
				list:[]
			}
			
		},
		created(){
			this.setTitle(this.title);
			this.setActive();
			this.getList();
		},
		watch:{
			'$route'(to,from){
    			this.id=this.$route.query.id;
    			this.acitveNum="item_"+this.$route.query.id;
    			this.title=this.$route.query.listName;
				this.setTitle(this.title);
				this.setActive();
				this.getList();
			}
		},
		methods:{
			setTitle(name){
				//设置上面的标题
				this.$emit("getTitle",name);
			},
			setActive(){
				//设置左侧的菜单高亮
				
				this.$root.Bus.$emit("nowActive",this.acitveNum)
			},
			getList(){
				this.$ajax.get(this.global.url+"/api/user/Projectlist?pageNumber="+this.pageNumber+"&pageSize="+this.pageSize+"&typeId="+this.id).then(res=>{
					let data=res.data;
					if(data.code=="0"){
						this.list=data.data.records;
					}
					else{
						this.list=[];
					}
				})
			}
		}
	}
</script>

<style scoped>
.main{
	padding:1.5rem 7% 1.5rem 7%;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
.list{
	width: 100%;
    background: #fff;
    padding:3.3rem 5% 3.3rem 5.3%;
}
.list ul{
	width:100%;
	overflow: hidden;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: stretch;
	-moz-align-items: stretch;
	-ms-align-items: stretch;
	-o-align-items: stretch;
	align-items: stretch;
}
.list li{
	/*width:25%;*/
	-webkit-flex:0 0 25%;
	-moz-flex:0 0 25%;
	-ms-flex:0 0 25%;
	-o-flex:0 0 25%;
	flex:0 0 25%;
	padding-right:20px;
	/*height:48px;*/
	margin-bottom: 20px;
	overflow: hidden;
}
.list li a{
	display: block;
	position: relative;
	font-size:14px;
	line-height:32px;
	background: #eaecef;
	padding:8px 0px 8px 2rem;
	width:100%;
	height:48px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.list li a:before{
	content:"";
	width:6px;
	height:6px;
	background: #53306c;
	position: absolute;
	left:1.2rem;
	top:50%;
	margin-top:-3px;
}
.nametitle{
	font-size: 1.5rem;
	color:#53306c;
	text-align: center;
	line-height: 2.5rem;
	margin-bottom: 1.5rem;
	margin-top:1.5rem;
	display: none;
}
@media only screen and (min-width:960px) and (max-width:1440px){
	.main{
		padding:1.5rem 2rem;
	}
}
@media only screen and (min-width: 320px) and (max-width: 959px) {
	.main{
		padding: 0px 1.5rem 1.5rem 1.5rem;
	}
	.nametitle{
		display: block;
	}
	
}
@media only screen and (min-width:480px) and (max-width: 768px) {
	.list li{
		-webkit-flex:0 0 50%;
		-moz-flex:0 0 50%;
		-ms-flex:0 0 50%;
		-o-flex:0 0 50%;
		flex:0 0 50%;
	}
}
@media only screen and (min-width:320px) and (max-width:479px) {
	.list li{
		-webkit-flex:0 0 100%;
		-moz-flex:0 0 100%;
		-ms-flex:0 0 100%;
		-o-flex:0 0 100%;
		flex:0 0 100%;
	}
}
</style>